<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span>1:操作表格</span>
		<p>
			thead，caption，tfoot，标签在一个表格只能有一个。
			
		</p>
		<hr style="height:3px;border:none;border-top:3px double red;" />
		
		<table border="1" width="300">
			<caption>人员表</caption>
			<thead>
				<tr>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>张三</td>
					<td>男</td>
					<td>16</td>
				</tr>
				<tr>
					<td>李四</td>
					<td>男</td>
					<td>17</td>
				</tr>
				<tr>
					<td>王五</td>
					<td>女</td>
					<td>16</td>
				</tr>
			</tbody>
				<tbody>
				<tr>
					<td>张三</td>
					<td>男</td>
					<td>16</td>
				</tr>
				<tr>
					<td>李四</td>
					<td>男</td>
					<td>17</td>
				</tr>
				<tr>
					<td>王五</td>
					<td>女</td>
					<td>16</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="3">合计：xxx</td>
				</tr>
			</tfoot>
		</table>
		<hr style="height:3px;border:none;border-top:3px double red;" />
		
	</body>
	<script>
		window.onload =function(){
			
	/*		//使用DOM创建表格
			var table = document.createElement('table');//创建table
			
			//table.width =300;    //设置宽度
			table.setAttribute('width',300);
			
			table.border=1;
			
			var caption = document.createElement('caption');  
			table.appendChild(caption);   //在table后面追加
			
			//caption.innerHTML ='测试表';
			var captionText = document.createTextNode('测试表');
			
			caption.appendChild(captionText);
			
			var thead =document.createElement('thead');
			table.appendChild(thead);
			
			var tr =document.createElement('tr');
			thead.appendChild(tr);
			
			var th =document.createElement('th');
			tr.appendChild(th);
			th.appendChild(document.createTextNode('数据1'));
			
			var th2 =document.createElement('th');
			tr.appendChild(th2);
			th2.appendChild(document.createTextNode('数据2'));
			
			document.body.appendChild(table);  //在body 后面追加*/
			
			
			//dom获取表格(繁琐)
			var table = document.getElementsByTagName('table')[0];
		//	alert(table.children[0].innerHTML);//人员表
		//	alert(table.children[2].children[1].children[1].innerHTML);//男
		 	
	/*	 	//直接获取的方法
		   alert(table.caption.innerHTML);//获取caption
		   table.caption.innerHTML ='修改表';//修改
		   
		   alert(table.tHead);
		   alert(table.tBodies[0]);
		   
		   //按HTML DOM来获取表格主体内第一行的单元格数量 （tr）
		   alert(table.rows.length);//得到所有tr 的行数
		   
		   alert(table.tBodies[0].rows[0]);//得到表格主体第一行的单元格数量
		   //按HTML DOM来获取表格主体内第一行第一个单元格内的内容 （td）
		   alert(table.tBodies[0].rows[0].cells[0].innerHTML);//获取第一行第一个单元格的内容
		   
		   alert(table.tBodies[0].rows[1].cells[2].innerHTML);//得到第一个tbody的第二行第三个数据
		   */
		   
	/*	   //删除
		   table.deleteCaption();
		   table.tBodies[0].rows[2].deleteCell(2);*/
		  
	/*	  //插入
		 table.createTHead().insertRow(0).insertCell(0).innerHTML ='数据1';*/
		   
		   
		}
	</script>
</html>
